<include file="public@header"/>
</head>
<style>
    /*td input, td select {*/
    /*    width: auto;*/
    /*    max-width: 180px;*/
    /*}*/

    .form-horizontal .control-group1 {
        float: left;
        width: 15%;
        margin-bottom: 20px;
    }

    .form-horizontal .control-label {
        width: 80px;
    }

    .form-horizontal .controls {
        margin-left: 90px;
    }

    input, select, textarea, .uneditable-input {
        max-width: 580px;
        width: 100px;
        min-width: auto;
    }

    .div_service {
        width: 200px;
        height: 100px;
        border: #dedcdc solid 1px;
        border-radius: 5px;
        float: left;
        margin-right: 20px
    }

    .div_service_text {
        background-color: #1C9846;
        color: white;
        width: 80px;
        height: 25px;
        line-height: 25px;
        padding-left: 10px;
        margin: 10px 0 0 10px;
    }

    .div_service_sum {
        margin: 20px 0 0 60px;

    }

    table tr th {
        height: 30px;
        /*color: white;*/
        padding: 0 60px 0 10px;
        text-align: center;
    }

    /*table thead tr {*/
    /*    background: #0B90C4;*/
    /*}*/
    #table1 tr td {
        /*max-width: 140px;*/
        width: auto;
        text-align: center;

    }

    #table1 table tr th, #table1 table tr td {
        height: 30px;
        line-height: 30px;
        border: #DDDDDD solid 1px;

        /*color: white;*/
        /*padding: 0 40px 20px 10px;*/
    }

    /*.content_nav .check_info{flex:1; display:flex;flex-direction: column;align-items: center;justify-content: center;}*/
    /*thead tr th {*/
    /*    border: 0 !important;*/
    /*}*/

    /*.table-striped > tbody > tr:nth-of-type(odd) {*/
    /*    background-color: #f7f7f7;*/
    /*}*/

</style>
<body>
<div class="wrap js-check-wrap">
    <!--搜索条件-->
    <div class="well form-search">
        <label style="margin-right: 30px">
            <div id="shoppingguide"></div>
        </label>
        <label style="margin-right: 30px">
            <div id="daili"></div>
        </label>
        <label style="margin-right: 30px">
            <div id="diding"></div>
        </label>
        <label style="margin-right: 30px">
            按葬式检索:
            <select class="form-control" id='cate_id' onchange='changecate_id()' style="width: 200px">
                <option value=''>-请选择-</option>
                <option value="1">商品墓</option>
                <option value="2">艺术墓</option>
                <option value="3">生态墓</option>
                <option value="4">节地墓</option>
            </select>
        </label>
        </br>
        起止时间: <input type="date" class=' form-control' id="startTime"
                     placeholder="请输入开始时间">
        ~
        <input type="date" class=' form-control' id="endTime"
               placeholder="请输入结束时间" style="margin-right: 30px">
        <button class="btn btn-default" name="type" value="1" onclick="typeClick(1)">昨日</button>
        <button class="btn btn-default" name="type" value="2" onclick="typeClick(2)">今日</button>
        <button class="btn btn-default" name="type" value="3" onclick="typeClick(3)">上月</button>
        <button class="btn btn-default" name="type" value="4" onclick="typeClick(4)">本月</button>
        <input type="hidden" id="type">
        <input type="submit" id="submit" class="btn btn-primary" value="查询"/>
        <input type="button" id="reset" class="btn btn-primary" value="重置"/>
    </div>
    <!--统计数量显示-->
    <div style="width: 1400px" id="statistics"></div>

    <div style="margin-top: 145px" id="table1">
        <div class="control-group1-p div_content">
            <!---tab页-->
            <ul class="nav_tabs" style="margin: 0; padding-top: 9px !important;height: 38px !important;">
                <li class="active" data-t="1"><a href="javascript:">客户统计</a></li>
            </ul>
            <div class="control-group1-p nav_content">
                <div class="content_nav">
                    <div style="border: 1px solid #0b81c4;border-top: 0;">
                        <div class="fixed-table-body">
                            <table class="table table-hover   table-striped">
                                <thead>
                                <tr>

                                    <th style="" data-field="no">
                                        <div class="th-inner ">序号</div>
                                        <div class="fht-cell"></div>

                                    </th>
                                    <th style="" data-field="type">
                                        <div class="th-inner ">类型</div>
                                        <div class="fht-cell"></div>
                                    </th>
                                    <th style="" data-field="pay_sn">
                                        <div class="th-inner ">付款日期</div>
                                        <div class="fht-cell"></div>
                                    </th>

                                    <th class="total_price" style="" data-field="total_price">
                                        <div class="th-inner ">购墓人</div>
                                        <div class="fht-cell"></div>
                                    </th>
                                    <th class="add_time" style="">
                                        <div class="th-inner ">区域</div>
                                        <div class="fht-cell"></div>
                                    </th>
                                    <th style="" data-field="real_name">
                                        <div class="th-inner ">具体位置</div>
                                        <div class="fht-cell"></div>
                                    </th>

                                    <th style="" data-field="tomb_num">
                                        <div class="th-inner ">墓位编号</div>
                                        <div class="fht-cell"></div>
                                    </th>
                                    <th style="">
                                        <div class="th-inner ">产品价格</div>
                                        <div class="fht-cell"></div>
                                    </th>
                                    <th style="">
                                        <div class="th-inner ">优惠金额</div>
                                        <div class="fht-cell"></div>
                                    </th>
                                    <th style="">
                                        <div class="th-inner ">成交价格</div>
                                        <div class="fht-cell"></div>
                                    </th>
                                    <th style="">
                                        <div class="th-inner ">导购员</div>
                                        <div class="fht-cell"></div>
                                    </th>
                                    <th style="text-align: center; " data-field="operate">
                                        <div class="th-inner ">代理商</div>
                                        <div class="fht-cell"></div>
                                    </th>
                                    <th style="text-align: center; " data-field="operate">
                                        <div class="th-inner ">抵顶人</div>
                                        <div class="fht-cell"></div>
                                    </th>
                                </tr>
                                </thead>
                                <tbody id="table"></tbody>
                            </table>
                            <!--分页-->
                            <nav aria-label="Page navigation">
                                <ul class="pagination" id="page"></ul>
                            </nav>

                        </div>
                    </div>

                </div>
            </div>
        </div>

    </div>

</div>

<script type="text/javascript" src="__STATIC__/js/admin.js"></script>
<link href="__STATIC__/js/bootstrap-table/dist/bootstrap-table.css" rel="stylesheet"/>
<script src="__STATIC__/js/bootstrap-table/dist/bootstrap-table.js"></script>
<script src="__STATIC__/js/bootstrap-table/dist/locale/bootstrap-table-zh-CN.js"></script>
<script type="text/javascript">

    var shoppingguide = 0;
    var daili = 0;
    var didingren = "";
    var pages = 1;
    var lastPage = 0;
    var cate_id = '';

    function changeShoppingGuide() {
        shoppingguide = $("#daogouyuan").val();
    }

    function changeDaiLiShang() {
        daili = $("#dailishang").val();
    }

    function changeDiDingRen() {
        didingren = $("#didingren").val();
    }
    function changecate_id() {
        cate_id = $("#cate_id").val();
    }
    function typeClick(type) {
        console.log(type);
        $("#startTime").val("");
        $("#endTime").val("");
        $("#type").val(type);
        findAll();
    }

    function page(val) {
        console.log(val)
        pages = val;
        findAll();
    }

    function nextPage() {
        if (pages === lastPage) {
            return false;
        }
        pages = pages + 1;
        findAll()
        console.log(pages + 1)
    }

    function previousPage() {
        if (pages === 1) {
            return false;
        }
        pages = pages - 1
        findAll();
        console.log(pages - 1);
    }

    function isNull(data) {
        return data == null ? '' : data;
    }

    /**
     * 时间字符串转日期
     * @param str
     * @returns {Date}
     */
    function stringToDate(str) {

        var tempStrs = str.split(" ");

        var dateStrs = tempStrs[0].split("-");

        var year = parseInt(dateStrs[0], 10);

        var month = parseInt(dateStrs[1], 10) - 1;

        var day = parseInt(dateStrs[2], 10);

        var date = new Date(year, month, day);

        return date;

    }


    function findAll() {
        var param = {
            type: $("#type").val(),
            shoppingguide: shoppingguide,
            daili: daili,
            didingren: didingren,
            start_time: $("#startTime").val(),
            end_time: $("#endTime").val(),
            page: pages,
            cate_id: cate_id
        };
        console.log(param);
        $.ajax({
            url: "{:url('Analysis/saleStatistics')}",
            type: "post",
            data: param,
            success: function (data) {
                console.log(JSON.parse(JSON.stringify(data)))
                var daoGouHtml = "按导购员检索: <select class=\"form-control\" id='daogouyuan' onchange='changeShoppingGuide()' style=\"width: 200px\"><option value=''>-请选择-</option>";
                for (var i = 0; i < data.data.daogouyuan.length; i++) {
                    if (shoppingguide == data.data.daogouyuan[i].id) {
                        daoGouHtml += "<option selected value=" + data.data.daogouyuan[i].id + ">" + data.data.daogouyuan[i].user_nickname + "</option>"
                    } else {
                        daoGouHtml += "<option value=" + data.data.daogouyuan[i].id + ">" + data.data.daogouyuan[i].user_nickname + "</option>"
                    }
                }
                daoGouHtml += "</select>"
                var daiLiHtml = "代理商检索: <select class=\"form-control\" id='dailishang' onchange='changeDaiLiShang()' style=\"width: 200px\"><option value=''>-请选择-</option>";
                for (var j = 0; j < data.data.dailishang.length; j++) {
                    if (daili == data.data.dailishang[j].id) {
                        daiLiHtml += "<option  selected value=" + data.data.dailishang[j].id + ">" + data.data.dailishang[j].user_nickname + "</option>"
                    } else {
                        daiLiHtml += "<option   value=" + data.data.dailishang[j].id + ">" + data.data.dailishang[j].user_nickname + "</option>"
                    }
                }
                daiLiHtml += "</select>";
                var diDingHtml = "按抵顶人检索: <select class=\"form-control\" id='didingren' onchange='changeDiDingRen()' style=\"width: 200px\"><option value=''>-请选择-</option>";
                for (var j = 0; j < data.data.didingren.length; j++) {
                    if (didingren == data.data.didingren[j].user_nickname) {
                        diDingHtml += "<option selected value=" + data.data.didingren[j].user_nickname + ">" + data.data.didingren[j].user_nickname + "</option>"
                    } else {
                        diDingHtml += "<option value=" + data.data.didingren[j].user_nickname + ">" + data.data.didingren[j].user_nickname + "</option>"
                    }
                }
                diDingHtml += "</select>"
                var statistics = "";
                statistics += "<div class=\"div_service\"><p class=\"div_service_text\">销售单量</p>\n" +
                    "            <p class=\"div_service_sum\"><b>" + data.data.statistics.OrderData + "单</b></p></div>"
                statistics += "<div class=\"div_service\"><p class=\"div_service_text\">销售流水</p>\n" +
                    "            <p class=\"div_service_sum\"><b>" + data.data.statistics.flowing + "元</b></p></div>"
                statistics += "<div class=\"div_service\"><p class=\"div_service_text\">优惠累计</p>\n" +
                    "            <p class=\"div_service_sum\"><b>" + data.data.statistics.discount + "元</b></p></div>"
                statistics += "<div class=\"div_service\"><p class=\"div_service_text\">成交额累计</p>\n" +
                    "            <p class=\"div_service_sum\"><b>" + data.data.statistics.DealData + "元</b></p></div>"
                statistics += "<div class=\"div_service\"><p class=\"div_service_text\">返利累计</p>\n" +
                    "            <p class=\"div_service_sum\"><b>" + data.data.statistics.rebateSum + "元</b></p></div>"
                statistics += "<div class=\"div_service\"><p class=\"div_service_text\">实收结余</p>\n" +
                    "            <p class=\"div_service_sum\"><b>" + data.data.statistics.balance + "元</b></p></div>"
                $("#shoppingguide").html(daoGouHtml);
                $("#daili").html(daiLiHtml);
                $("#diding").html(diDingHtml);
                $("#statistics").html(statistics);
                console.log(11)

                var tableHtml = "";
                var tableData = data.data.orderData.data;
                var a = 0;
                for (var k = 0; k < tableData.length; k++) {
                    a++;
                    if (tableData[k].tomb_type == 2) {
                        var youhui = tableData[k].selling_price * tableData[k].subscription_area - tableData[k].closing_price;
                    } else {
                        var youhui = tableData[k].selling_price - tableData[k].closing_price;
                    }
                    var type = tableData[k].tomb_type == 1 ? '商品墓' : (tableData[k].tomb_type == 2 ? '艺术墓' : (tableData[k].tomb_type == 3 ? '生态墓' : (tableData[k].tomb_type == 4 ? '节地墓' : '')))
                    var name = tableData[k].daili == null ? '' : tableData[k].daili;
                    // var daogou = isNull(tableData[k].daogou);
                    tableHtml += "<tr><td>" + a + "</td>" +
                        "<td>" + type + "</td>" +
                        "<td>" + tableData[k].closing_time + "</td>" +
                        "<td>" + tableData[k].buyer_name + "</td>" +
                        "<td>" + tableData[k].tomb_region + "</td>" +
                        "<td>" + tableData[k].tomb_address + "</td>" +
                        "<td>" + tableData[k].tomb_num + "</td>" +
                        "<td>" + tableData[k].selling_price + "</td>" +
                        "<td>" + youhui + "</td>" +
                        "<td>" + tableData[k].closing_price + "</td>" +
                        "<td>" + isNull(tableData[k].daogou) + "</td>" +
                        "<td>" + name + "</td>" +
                        "<td>" + tableData[k].reacher + "</td>" +
                        "</tr>"
                }
                $("#table").html(tableHtml);
                lastPage = data.data.orderData.last_page;
                var page = "<li>\n" +
                    "                                        <a onclick='previousPage()' aria-label=\"Previous\">\n" +
                    "                                            <span aria-hidden=\"true\">&laquo;</span>\n" +
                    "                                        </a>\n" +
                    "                                    </li>";
                for (var p = 1; p < lastPage + 1; p++) {
                    page += "<li><a  onclick='page(" + p + ")'>" + p + "</a></li>"
                }
                page += "<li>\n" +
                    "                                        <a  onclick='nextPage()' aria-label=\"Next\">\n" +
                    "                                            <span aria-hidden=\"true\">&raquo;</span>\n" +
                    "                                        </a>\n" +
                    "                                    </li>";
                $("#page").html(page);
            }, error: function () {
                console.log("shibai")
            }
        })
    }

    function sarttime() {
        alert(11);

    }


    $(document).ready(function () {
        console.log(123)
        findAll();


        $("#submit").click(function () {
            pages = 1
            findAll();
        })
        $("#reset").click(function () {
            $("#daogouyuan").val("");
            $("#dailishang").val("");
            $("#didingren").val("");
            $("#type").val("");
            $("#startTime").val("");
            $("#endTime").val("");
            pages = 1;
            shoppingguide = 0;
            daili = 0;
            didingren = 0;
            findAll();
        })
        $("#startTime").change(function () {
            var start = stringToDate($("#startTime").val()).getTime() / 1000;
            var end = stringToDate($("#endTime").val()).getTime() / 1000;
            if (end - start > 3600 * 24 * 30) {
                alert("最大范围只能选一个月")
                $("#startTime").val("")
                $("#endTime").val("")
            }
        })
        $("#endTime").change(function () {
            var start = stringToDate($("#startTime").val()).getTime() / 1000;
            var end = stringToDate($("#endTime").val()).getTime() / 1000;
            if (end - start > 3600 * 24 * 30) {
                alert("最大范围只能选一个月")
                $("#startTime").val("")
                $("#endTime").val("")
            }
        })

        Wind.css('treeTable');
        Wind.use('treeTable', function () {
            $("#dnd-example").treeTable({
                indent: 20
            });
        });
        //     $("button[name='type']").click(function (e) {
        //         console.log(e)
        //     })

    });


</script>
</body>
</html>